<template>
	<view class="itu-demo">
		<view class="itu-demo-wrap">
			<view class="itu-demo-title">演示单选效果</view>
			<view class="itu-demo-area">
				<view class="itu-demo-result-line" @click="showDate=true">
					<text>日期：{{date|| '请选择日期'}}</text>
				</view>
			</view>
			<itu-calendar v-model="showDate" :date="date" @change="changeDate"></itu-calendar>
		</view>
		<view class="itu-demo-wrap itu-mt-20">
			<view class="itu-demo-title">演示多选效果</view>
			<view class="itu-demo-area">
				<view class="itu-demo-result-line" @click="showRangeDate=true">
					<text>日期：{{rangeDate|| '请选择日期'}}</text>
				</view>
			</view>
		</view>
		<itu-calendar mode="range" shape="round" :dateRange="dateRange" v-model="showRangeDate" @change="changeRangeDate"></itu-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDate: false,
				date: "",
				showRangeDate: false,
				rangeDate: '',
				dateRange: ['2024-05-01', '2024-06-03']
			};
		},
		onLoad({ title }) {
			this.setNavigationBarTitle(title)
		},
		methods:{
			changeDate(e){
				console.log("date", e)
				this.date = e.result;
			},
			changeRangeDate(e){
				console.log("rangeDate", e)
				this.rangeDate = `${e.startDate} 至 ${e.endDate}`
				this.dateRange = e.result;
			}
		}
	}
</script>